<template>
    <div class="container">
        <div v-show="this.$store.state.user.isLogin">
            <header-nav></header-nav>
        </div>
        <div>
            <transition name="fade">
                <router-view></router-view>
            </transition>
        </div>
        <div v-show="this.$store.state.user.isLogin">
            <footer-nav></footer-nav>
        </div>

    </div>
</template>

<script>
import {mapActions, mapGetters, mapState} from "vuex";
import FooterNav from '@/components/FooterNav.vue';
import HeaderNav from "@/components/HeaderNav.vue";

export default {
    data() {
        return {};
    },
    created() {
        console.log("app",this.$route.path)
        this.checkLogin();
    },
    beforeUpdate() {
    },
    updated() {
    },
    destroyed() {
    },
    computed: {
        ...mapGetters("user", ["isSeller"])
    },
    methods: {
        ...mapActions("user", ["islogin"]), // `mapActions` 支持载荷将 `this.islogin` 映射为 `this.$store.dispatch('islogin')`

        async checkLogin() {
            let name = "welcome";
            try {
                let result = await this.islogin();
                if (result.state) {
                    this.$toast("用户已经登录");
                    if (this.isSeller) {
                        name = "sellerHome"
                    } else {
                        name = "home"
                    }
                }
            } catch (error) {
                //需要用户登录
                console.log(error)
            }
            this.$router.push({name: name})
        },
    },
    components: {
        "footer-nav": FooterNav,
        "header-nav": HeaderNav
    },
};
</script>

<style lang="scss">

.fade-enter {
    opacity: 0;
    transform: translateX(100%);
}

.fade-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.5s ease;
}

.container {
    padding-top: 46px;
    padding-bottom: 50px;
    overflow-x: hidden;
    //background-image: url("./assets/xianwu_bg.jpeg");
    //opacity: 0.5;
}

</style>
